<template>
  <ul :id="id" class="w-query-search">
    <li v-for="item in query_items" :key="item.label" :style="'width:' + itemWidth + 'px'">
      <label :style="'width:' + (item.labelWidth || labelWidth) + 'px'">{{ item.label }}:</label>
      <template v-if="item.type === 'select'">
        <w-base-select
          v-model="item.value"
          :select-list="item.options.list"
          :api="item.options.api"
          :params="item.options.params"
          :obj-type="{ label: item.options.label || 'label', val: item.options.value || 'value', key: item.options.value || 'value' }"
          @onSelect="onSelect(item)"
        />
        <!--        <w-data-select-->
        <!--          v-if="item.dataType"-->
        <!--          v-model="item.value"-->
        <!--          :channel-type="item.channelType || false"-->
        <!--          :channel-rank="item.channelRank || &quot;&quot;"-->
        <!--          :type="item.dataType"-->
        <!--          :label="item.options ? item.options.label : 'name'"-->
        <!--          :val="item.options ? item.options.value : 'id'"-->
        <!--          :data="item.options? item.options.data : null"-->
        <!--          :multiple="item.multiple"-->
        <!--          :use-combo="item.useCombo"-->
        <!--          :filterable="item.filterable"-->
        <!--          :remote="item.remote"-->
        <!--        />-->
        <!--        <el-select v-model="item.value" :multiple="item.multiple" clearable filterable collapse-tags>-->
        <!--          <el-option v-for="option in item.options.list" :key="option[item.options.value || 'value']" :value="option[item.options.value || 'value']" :label="option[item.options.label || 'label']" />-->
        <!--        </el-select>-->
      </template>
      <w-people-cascader v-else-if="item.type === 'dataTreeDep'" v-model="item.value" :tree-type="item.treeType" :params="item.params" :need-people="item.needPeople" :props-kyes="item.propsKyes" :is-need-filter="item.isNeedFilter" />
      <el-date-picker v-else-if="item.type === 'year'" v-model="item.value" :placeholder="item.placeholder" type="year" :editable="false" value-format="yyyy" />
      <el-date-picker v-else-if="item.type === 'month'" v-model="item.value" :placeholder="item.placeholder" type="month" value-format="yyyy-MM" :editable="false" :clearable="item.clearable" />
      <el-date-picker v-else-if="item.type === 'monthrange'" v-model="item.value" type="monthrange" value-format="yyyy-MM" :editable="false" />
      <el-date-picker v-else-if="item.type === 'week'" v-model="item.value" :placeholder="item.placeholder" type="week" :value-format="item.valueFormat || &quot;yyyy-WW&quot;" :format="item.format || 'yyyy 第 WW 周'" :picker-options="{firstDayOfWeek:1}" :editable="false" />
      <el-date-picker v-else-if="item.type === 'date'" v-model="item.value" :placeholder="item.placeholder" type="date" value-format="yyyy-MM-dd" :editable="false" :clearable="item.clearable" />
      <el-time-select v-else-if="item.type === 'time'" v-model="item.value" :editable="false" placeholder="选择时间" />
      <el-date-picker v-else-if="item.type === 'datetime'" v-model="item.value" :editable="false" :placeholder="item.placeholder" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" />
      <el-date-picker v-else-if="item.type === 'daterange' && item.noTime" v-model="item.value" :editable="false" :placeholder="item.placeholder" type="daterange" unlink-panels value-format="yyyy-MM-dd" start-placeholder="开始日期" end-placeholder="结束日期" :clearable="item.clearable" />
      <el-date-picker
        v-else-if="item.type === 'daterange' && !item.noTime"
        v-model="item.value"
        :editable="false"
        :placeholder="item.placeholder"
        type="daterange"
        unlink-panels
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']"
        :clearable="item.clearable"
      />
      <el-date-picker
        v-else-if="item.type === 'datetimerange' && !item.hasTime"
        v-model="item.value"
        :editable="false"
        :placeholder="item.placeholder"
        type="datetimerange"
        unlink-panels
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="item.clearable"
      />
      <el-date-picker
        v-else-if="item.type === 'datetimerange' && item.hasTime"
        v-model="item.value"
        :editable="false"
        :placeholder="item.placeholder"
        type="datetimerange"
        unlink-panels
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :clearable="item.clearable"
        :default-time="['00:00:00', '23:59:59']"
      />
      <span v-else-if="item.type === 'numberRange'">
        <el-input v-model="item.startNum" class="number" type="number" placeholder="最小值" @keyup.native.enter="query" /> -
        <el-input v-model="item.endNum" class="number" type="number" placeholder="最大值" @keyup.native.enter="query" />
      </span>
      <el-input v-else v-model.trim="item.value" :placeholder="item.placeholder" clearable @keyup.native.enter="query" />
    </li>
    <li>
      <el-button v-if="queryItems.length > 0 && queryItems" class="btn-cls" type="primary" @click="query">查询</el-button>
      <slot />
      <el-button v-if="queryItems.length > 0 && queryItems" size="mini" @click="reset">重置</el-button>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    queryItems: { // 查询项
      type: Array,
      default: () => {
        return []
      }
    },
    pageName: {
      type: String,
      default: ''
    },
    labelWidth: {
      type: [String, Number],
      default: '62'
    },
    authorityKey: {
      type: String,
      default: ''
    },
    itemWidth: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      query_items: [],
      id: '',
      queryDataParmas: {},
      originQuery: []
    }
  },

  watch: {
    queryItems: {
      handler(newv) {
        this.originQuery = JSON.stringify(newv)
        this.query_items = newv
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
    this.id = this.$router.currentRoute.query.t
    this.originQuery = JSON.stringify(this.queryItems)
    this.query_items = this.queryItems
    console.table(this.query_items)
  },
  methods: {
    onSelect(val) {
      this.$emit('onSelect', val)
    },
    // render(createElement) {
    //   const dataItems = this.query_items
    //   return createElement('ul', {
    //     arrts: {
    //       class: 'w-query-search'
    //     }
    //   }, [
    //     dataItems.forEach((item, index) => {
    //       createElement('li', {
    //       }, [
    //         createElement('label')
    //       ])
    //     })
    //   ])
    // },
    query() {
      this.$nextTick(() => {
        const queryData = {}
        this.query_items.forEach(e => {
          if (e.type === 'numberRange') {
            e.value = [e.startNum, e.endNum]
          }
          if (e.type === 'week' && e.value) {
            Object.assign(queryData, { [e.key]: this.moment(e.value).format('YYYY-') + this.moment(e.value).week() })
          } else if (e.type === 'week' && !e.value) {
            Object.assign(queryData, { [e.key]: '' })
          }
          if (typeof (e.value) === 'string' || typeof (e.value) === 'object') {
            if (e.value && e.value.length > 0) {
              Object.assign(queryData, { [e.key]: e.value })
            }
          } else {
            Object.assign(queryData, { [e.key]: e.value })
          }
        })
        this.queryDataParmas = {
          queryItems: this.query_items
        }
        this.$emit('query', queryData)
      })
    },

    reset() {
      this.query_items = this.evil(this.originQuery).map(item => {
        if (!item.default) {
          if (item.type === 'numberRange') {
            item.value = []
          } else {
            item.value = ''
          }
        } else {
          switch (item.type) {
            case 'date':
              item.value = this.$Util.currentDateTime('date')
              break
            case 'daterange':
              item.value = [this.$Util.currentDateTime('date'), this.$Util.currentDateTime('date')]
              break
            case 'datetime':
              item.value = this.$Util.currentDateTime('date') + ' 23:59:59'
              break
            case 'datetimerange':
              item.value = [this.$Util.currentDateTime('date') + ' 00:00:00', this.$Util.currentDateTime('date') + ' 23:59:59']
              break
          }
        }
        return item
      })
      this.query()
    },

    evil(fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    }

  }
}
</script>

